<template>
    <div>
       <h3>数据统计</h3>
       <Breadcrumb :breadcrumba="breadcrumba" :breadcrumbb="breadcrumbb"></Breadcrumb>

       <el-card>
           <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
           <!-- 2步 -->
        <div id="main" style="width: 600px;height:400px;"></div>

        <div>
            <h4>时间</h4>
            <p :class="{'redRoom': Number(items.status) === 1, 'redRoom1': Number(items.status) === 2, 'redRoom2': Number(items.status) === 3, 'redRoom3': Number(items.status) === 4}">我是测试的文字</p>
        </div>

         <el-date-picker
            v-model="time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            >
            </el-date-picker>

       </el-card>
    </div>
</template>

<script>
import Breadcrumb from "../../components/Breadcrumb"
import {getReportsList} from "../../api/goodss"
// 导入 echarts 1步
import  * as echarts from "echarts"

// 时间插件
import DateTimeUtils from "../../utils/dataRangUtil.js"

// 导入 lodash  两个对象的合并
import _ from 'lodash'
    export default {
        components:{
            Breadcrumb
        },
        data(){
            return{
                
                breadcrumba:'',
                breadcrumbb:'',
                // 需要合并的对象
                options: {
                    title: {
                        text: '用户来源'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#E9EEF3'
                        }
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                        boundaryGap: false
                        }
                    ],
                    yAxis: [
                        {
                        type: 'value'
                        }
                    ]
                },
                time:[DateTimeUtils.getCurrentWeek()[0],
                      DateTimeUtils.getCurrentWeek()[1]],
                    
                
                // value1:[]
                items:{
                    status:4
                }
            }
            
        },
        created(){
            this.breadcrumba=sessionStorage.getItem('breadcrumba')
            this.breadcrumbb=sessionStorage.getItem('breadcrumbb')
            // this.getReportsList()
        },
        // 执行到DOM 此时 页面上的元素已经渲染完毕  echarts 写到这里
        async mounted(){

            // 获取数据统计 数据
            let {data:res} = await getReportsList()
            console.log(res,"获取的数据统计");
             // 3步 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
            // 4步
            // var option = {
            //     title: {
            //         text: 'ECharts 入门示例'
            //     },
            //     tooltip: {},
            //     legend: {
            //         data:['销量']
            //     },
            //     xAxis: {
            //         data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            //     },
            //     yAxis: {},
            //     series: [{
            //         name: '销量',
            //         type: 'bar',
            //         data: [5, 20, 36, 10, 10, 20],
            //         color: ['#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42']
            //     }]
            // };



            //将两个或多个 对象进行 合并 处理 Object.assign() 
            // var result = Object.assign(res.data,this.options)

            // 用lodash 进行合并 对象 
            const result = _.merge(res.data,this.options)



            // 展示数据
            // 5步 使用刚指定的配置项和数据显示图表。
            // myChart.setOption(option);

            // 用获取到的数据 当图表的数据
            // myChart.setOption(res.data);

            // 用合并之后的对象 进行渲染
            myChart.setOption(result);
        },
        methods:{
            // async getReportsList(){
            //     let {data:res} = await getReportsList()

            //     console.log(res,"获取的数据统计");
            // }
            // aaa(){
            //     console.log(this.time,"时间绑定的");
            // }

            
        }
    }
</script>

<style scoped>
    .el-card{
        margin-top: 15px;
    }
    .redRoom{
        color: aquamarine;
    }
    .redRoom1{
        color: brown;
    }
    .redRoom2{
        color: chartreuse;
    }
    .redRoom3{
        color: darkblue;
    }
</style>


